<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="../common.css" />
	<style type="text/css">
		html,
		body {
			height: 100%;
			width: 100%;
			background-color: #222;
		}

		.container {
			width: 100%;
			height: 100%;
			position: relative;
			padding: 2em;
			filter: contrast(20);
			background-color: black;
			overflow: hidden;
		}

		h1 {
			white-space: nowrap;
			font-family: Righteous;
			color: #FFFFFF;
			font-size: 4rem;
			text-transform: uppercase;
			line-height: 1;
			animation: letterspacing 3s infinite alternate ease-in-out;
			display: block;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate3d(-50%, -50%, 0);
			letter-spacing: -2.2rem;
		}

		@keyframes letterspacing {
			0% {
				letter-spacing: -2.4rem;
				filter: blur(.3rem);
			}

			50% {
				filter: blur(.5rem);
			}

			100% {
				letter-spacing: .5rem;
				filter: blur(0rem);
				color: #fff;
			}
		}


		.mix-circle {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 300px;
			height: 200px;
			filter: contrast(20);
		}

		.mix-circle::before {
			content: "";
			position: absolute;
			width: 120px;
			height: 120px;
			border-radius: 50%;
			background: olive;
			top: 40px;
			left: 80px;
			z-index: 2;
			filter: blur(6px);
			animation: filterBallMove 4s ease-out infinite;
		}

		.mix-circle::after {
			content: "";
			position: absolute;
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background: green;
			top: 60px;
			right: 40px;
			z-index: 2;
			filter: blur(6px);
			animation: filterBallMove2 4s ease-out infinite;
		}

		@keyframes filterBallMove {
			50% {
				left: 140px;
			}
		}

		@keyframes filterBallMove2 {
			50% {
				right: 140px;
			}
		}
	</style>
	<body>
		<div class="container">
			<h1> welcome to susu's blog</h1>
		</div>
		<!-- <div class="mix-circle"></div> -->
	</body>
</html>
